import React, { Component } from 'react'

export default class Footer extends Component {
    changAll = (e) => {
        this.props.checkAll(e.target.checked)
    }

    clearAll = () => {
        this.props.clearAll()
    }

    render() {
        const { todos } = this.props
        const count = todos.reduce((total, item) => {
            if (item.done) {
                return total + 1
            } else {
                return total
            }
        }, 0)
        const total = todos.length
        return (
            <div style={{ lineHeight: '30px', padding: '5px' }}>
                <input type="checkbox" checked={count === total && total > 0 ? true : false} onChange={this.changAll}></input>
                <span>已完成{count}/全部{todos.length}</span>
                <button style={{ float: 'right' }} onClick={this.clearAll}>清楚已选</button>
            </div>
        )
    }
}